<html>
    <head>
        <style>
            body {
              max-width: 600px;
              margin: 50px auto;
              font-family: Arial;
              font-size: 15px;
              line-height: 1.5em;
            }
            .tip {
              font-size: .8em;
            }
        </style>
    </head>
    <body>

<h1>Selection view</h1>

<p>This plugin implements selecting elements into a group, moving the selected elements in one go
    and manipulating the selection in terms of selecting/deselecting individual elements.</p>

<h2>Install</h2>

<p>Include <code>joint.ui.selectionView.js</code> and <code>joint.ui.selectionView.css</code> files to your HTML:</p>

<pre><code>
&lt;link rel="stylesheet" type="text/css" href="joint.ui.selectionView.css" /&gt;
&lt;script type="text/javascript" src="joint.ui.selectionView.js"&gt;&lt;/script&gt;
</code></pre>

<h2>Initialization</h2>

<p>First, a collection for storing selected cells must be created. This can just be a normal
Backbone Collection. The second step is the create the SelectionView itself. This view takes care
of rendering the bounding rectangle during the selection action, determining which elements
fall into this rectangle and also provides methods for selecting/deselecting individual elements.</p>

<pre><code>
var selection = new Backbone.Collection;
var selectionView = new joint.ui.SelectionView({ paper: paper, graph: graph, model: selection });
</code></pre>

<p>The next step is to hook the selection actions to the relevant events triggered on the paper and selectionView:</p>

<pre><code>
paper.on('blank:pointerdown', selectionView.startSelecting);

paper.on('cell:pointerup', function(cellView, evt) {
     if ((evt.ctrlKey || evt.metaKey) && !(cellView.model instanceof joint.dia.Link)) {
             selectionView.createSelectionBox(cellView);
             selection.add(cellView.model);
     }
});

selectionView.on('selection-box:pointerdown', function(evt) {
     if (evt.ctrlKey || evt.metaKey) {
             var cell = selection.get($(evt.target).data('model'));
             selectionView.destroySelectionBox(paper.findViewByModel(cell));
             selection.reset(selection.without(cell));
     }
});
</code></pre>

<p>Note that the <code>selection-box:pointerdown</code> event is triggered on the selection view when 
the mouse cursor is pressed above a selected element.</p>


<h2>Reacting on changes in the selection</h2>

<p>As our selection is just a normal <a href="http://backbonejs.org/#Collection">Backbone Collection</a>, we can take advantage of the Backbone methods
to identify elements that are currently in the selection:</p>

<pre><code>
selection.on('reset add', function() {
    // Print types of all the elements in the selection. 
    console.log(selection.pluck('type'));
});
</code></pre>


<h2>Customizing the look of the selection</h2>

<p>The selection bounding rectangle together with the rectangles above the selected elements can be styled in CSS.
The selection bounding rectangle is a &lt;div&gt; element with the <code>.selected</code> class. The rectangles
above the selected elements are also &lt;div&gt; elements but with the <code>.selection-box</code> class. An example of 
a custom styling (though probably not very appealing) of the selection bounding rectangle might look like:
</p>

<pre><code>
.selection {
   background-color: red;
   opacity: .2;
   border: 2px dashed black;
}
</code></pre>
